<template>
	<div class="setting-form-container">
		<!-- 表单组件 -->
		<FormDesigner v-if="showFormDetail" :schema="schema" :title="title" :onSave="onSave" :onBack="goBack" :name="name" />
	</div>
</template>

<script>
import FormDesigner from '@zco/form-designer';
import { updateFormTemplate, getFormTemplateList, getSceneFormDetail } from '@/api/api';
import { mapMutations, mapState } from 'vuex';
// import { getFormTitle } from '@/utils/tool';

import '@zco/form-designer/dist/form-designer.css';
// import '@zco/form-designer/dist/form-designer.css';
export default {
	components: {
		FormDesigner
	},
	data() {
		return {
			schema: [],
			title: '',
			showFormDetail: false,
			name: this.$route.params.name
		};
	},
	computed: {
		...mapState({
			formList: state => state.form.formList
		})
	},
	watch: {
		$route(to, from) {
			const _this = this;
			this.showFormDetail = false;
			this.$nextTick(() => {
				_this.formDetail(to.params.id);
			});
		}
	},
	mounted() {
		let form = JSON.parse(sessionStorage.getItem('editFormData'));
		const key = String(this.$route.params.id);
		if (form[key]) {
			this.name = form[key].name;
		}
		this.formDetail(this.$route.params.id);
	},
	methods: {
		...mapMutations('form', ['SET_FORM_LIST']),
		goBack() {
			this.$router.push('/index/form');
		},
		async onSave(formData) {
			// 备注
			let previewText = formData.schema.filter(item => item.customType === 'PreviewText');
			if (previewText.length === formData.schema.length) {
				this.$message.error('保存失败，请至少添加一个表单项！');
				return;
			}
			let data = { id: this.$route.params.id, fields: formData };
			try {
				await updateFormTemplate(data);
				this.$message.success('保存表单成功！');
				sessionStorage.setItem('editFormData', JSON.stringify(formData));
			} catch (e) {
				switch (e.code) {
					case 1002:
						this.$message.error('保存表单失败，表单已存在！');
						break;
					case 1101:
						this.$message.error('保存表单失败，请求权限拒绝！');
						break;
					case 1201:
						this.$message.error('保存表单失败，该表单正在被使用中！');
						break;
					default:
						this.$message.error('保存表单失败！');
						break;
				}
			} finally {
				const result = await getFormTemplateList({ page: this.$route.query.page, pageSize: this.$route.query.pageSize, isEmpty: false });
				const list = result.data.data.data.map(form => ({
					id: form.id,
					name: form.name,
					createdAt: this.$moment(form.createdAt).format('YYYY-MM-DD HH:mm:ss'),
					fields: form.fields ? form.fields : {}
				}));
				this.$store.commit('SET_FORM_LIST', list);
			}
			console.log('onSave : ', data);
		},
		// 业务表单详情
		formDetail(id) {
			getSceneFormDetail(id)
				.then(res => {
					if (res.status === 200 && res.data.data.fields) {
						console.log(res);
						this.title = res.data.data.fields.title || '';
						this.schema = res.data.data.fields.schema || [];
						this.name = res.data.data.name;
					}
				})
				.then(() => {
					this.showFormDetail = true;
				})
				.catch(err => {
					console.log(err);
					this.title = '';
					this.schema = [];
					this.name = '';
					this.showFormDetail = true;
				});
		}
	}
};
</script>

<style lang="less" scoped>
.setting-form-container {
	display: flex;
	height: 100%;
	/deep/ .workspace-wraper {
		height: unset;
		min-height: 100%;
		padding-bottom: 30px;
	}
}
</style>
<style lang="less">
.setting-form-container {
	.el-dialog--center .el-dialog__footer {
		text-align: right !important;
	}
	.el-date-editor {
		.el-input__prefix {
			i {
				line-height: 27px;
			}
		}
	}
}
</style>
